<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta http-equiv="content-Type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div class="content">
		<!--头部导航-->
		<div class="ucSimpleHeader">
			<div class="trigger">
				<a href="##">登录</a>
				<span>&nbsp;|&nbsp;</span>
				<a href="##">注册</a>
			</div>
		</div>
		<!--手机号码注册表单-->
		<form id="#mainForm1" class="mainForm mainForm1">
			<div class="number">
				<a href="##" class="linkABlue">手机号码注册</a>
				<span></span>
				<a href="##" class="linkAGray number1">账户名注册</a>
			</div>
			<div class="normalInput">
				<input type="text" class="phone" maxlength="11" placeholder="手机号码">	
			</div>
			<!--手机号码输入错误或空-->
			<span class="error error1"></span>
			<div class="normalInput">
				<input type="text" class="kapkey" maxlength="6" placeholder="验证码">
				<span class="formLine"></span>
				<a href="##" id="getKey" class="linkABlue">获取验证码</a>
			</div>
			<!--验证码输入错误或空-->
			<span class="error error2"></span>
			<div class="normalInput">
				<!--input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值-->
				<input type="text" class="password" maxlength="16" autocomplete="off" placeholder="密码">
				<input type="password" class="password1" maxlength="16" autocomplete="off" placeholder="密码">
				<a id="pwdBtn" href="##" class="pwdBtnShow" isshow="false">
					<i class="i_icon"></i>
				</a>
			</div>
			<!--密码输入错误或空-->
			<span class="error error3"></span>

			<!--协议条款-->
			<div class="rememberField">
				<!--tabindex "tab键选择顺序" 值为-1时不在"tab"键选择范围 默认值为0-->
				<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
					<i class="i_icon"></i>
				</span>
				<label class="pointer">我已阅读并接受</label>
				<a href="#" target="_blank" class="linkABlue">《Flyme服务协议条款》</a>
			</div>
			<span class="otherError">请确认已阅读并同意Flyme服务协议条款</span>
			<a href="##" class="fullBtnBlue">注册</a>
		</form>
		<!--账户名注册表单-->
		<form id="#mainForm2" class="mainForm mainForm2">
			<div class="number">
				<a href="##" class="linkABlue2 number2">手机号码注册</a>
				<span></span>
				<a href="##" class="linkAGray2">账户名注册</a>
			</div>
			<div class="normalInput">
				<input type="text" class="username" maxlength="32" placeholder="账户名" autocomplete="off">	
				<span class="grayTip">@flyme.cn</span>
			</div>
			<span class="error error1"></span>		
			<div class="normalInput">

				<input type="text" class="passwordN" maxlength="16" autocomplete="off" placeholder="密码">
				<input type="password" class="password1N" maxlength="16" autocomplete="off" placeholder="密码">
				<a id="pwdBtnN" href="##" class="pwdBtnShowN" isshow="false">
					<i class="i_icon"></i>
				</a>
			</div>
			<span class="error error3"></span>
			<div class="normalInput">
				<input type="text" class="email" maxlength="32" placeholder="安全邮箱" autocomplete="off">
			</div>
			<span class="error error2"></span>
			<div class="rememberField">
				<span class="checkboxPic check_chk" tabindex="-1" isshow="false">
					<i class="i_icon"></i>
				</span>
				<label class="pointer">我已阅读并接受</label>
				<a href="https://www.17sucai.com/" target="_blank" class="linkABlue">《Flyme服务协议条款》</a>
			</div>
			<span class="otherError">请确认已阅读并同意Flyme服务协议条款</span>
			<a href="##" class="fullBtnBlue">注册</a>
		</form>
	</div>


	<!--邮箱后缀选择-->
	<ul class="bRadius2 mail">
		<li data-mail="@qq.com" class="item item1">@qq.com</li>
		<li data-mail="@sina.com" class="item item2">@sina.com</li>
		<li data-mail="@126.com" class="item item3">@126.com</li>
		<li data-mail="@163.com" class="item item4">@163.com</li>
		<li data-mail="@gmail.com" class="item item5">@gmail.com</li>
	</ul>


	<!--注册提示信息-->
	<div id="mz_Float">
		<div class="mz_FloatBox">
			<div class="mz3AngleL">
				<i class="i_icon"></i>
			</div>
			<div class="mzFloatTip bRadius2">长度为8-16个字符，区分大小写，至少包含两种类型</div>
		</div>
	</div>
	
</body>
</html>